import React from "react";

export interface SvgIconProps {
  // 图标组件
  component: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  // 图标大小
  size?: number | string;
  // 图标颜色
  color?: string;
  // 额外的className
  className?: string;
  // 点击事件
  onClick?: () => void;
  // 其他SVG属性
  [key: string]: any;
}

/**
 * SVG图标组件
 * 用于统一处理SVG图标的大小、颜色等属性
 */
const SvgIcon: React.FC<SvgIconProps> = ({
  component: IconComponent,
  size = 24,
  color,
  className = "",
  onClick,
  ...restProps
}) => {
  return (
    <IconComponent
      width={size}
      height={size}
      fill={color}
      className={className}
      onClick={onClick}
      style={{ verticalAlign: "middle" }}
      {...restProps}
    />
  );
};

export default SvgIcon;
